<template>
  <div class="home">
    <h1>JWT Demo</h1>

    <button v-on:click="getData()">获取数据</button>
    <div>
      {{ resData }}
    </div>

    <form>
      <p>First name: <input type="text" v-model="username" /></p>
      <p>Last name: <input type="password" v-model="password" /></p>
    </form>
    <button v-on:click="login()">登录</button>

    <button v-on:click="hello()">hello</button>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {},
  methods: {
    getData() {
      let that = this;
      this.$http
        .get("http://localhost:8080/user/get/all", {
          params: {
            ID: 12345,
          },
          headers: {
            Authorization: localStorage.getItem("token"),
          },
        })
        .then(function (response) {
          console.log(response);
          that.resData = response;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    login() {      
      let that = this;
      var params = new URLSearchParams();
      params.append("username", this.username); //你要传给后台的参数值 key/value
      params.append("password", this.password);
      this.$http.post("http://localhost:8080/login", params).then((res) => {
        //console.info(res.data.msg);
        that.resData = res;
        localStorage.setItem("token", res.data.msg);
        //console.info(localStorage.getItem("token"));
      });
    },
    hello() {
      let that = this;
      this.$http
        .get("http://localhost:8080/hello", {
          params: {},
          headers: {
            Authorization: localStorage.getItem("token"),
          },
        })
        .then(function (response) {
          console.log(response);
          that.resData = response.data;
        });
    },
  },
  data() {
    return {
      username: "admin",
      password: "admin",
      resData: null,
    };
  },
};
</script>
